<!-- default publish logic: logged in users may publish, guests see sign-in prompt -->

<div>
    {#if $user.isGuest}
    <Guest
        fromSvelte="true"
        guest_text_above="{guest_text_above}"
        guest_text_below="{guest_text_below}"
    />
    {:elseif !$user.isActivated}
    <PendingActivation />
    {:else}
    <Publish
        {beforeExport}
        {redirectDisabled}
        {embedTemplates}
        {embedType}
        {pluginShareurls}
        {shareurlType}
    />
    {/if}
</div>

<script>
    // eslint-disable-next-line
    import { Publish } from '/static/js/svelte/publish.js';
    import Guest from './guest/Guest.html';
    import PendingActivation from './pending-activation/PendingActivation.html';
    import { loadScript, loadStylesheet } from '@datawrapper/shared/fetch';

    export default {
        components: {
            Publish,
            Guest,
            PendingActivation
        },
        data() {
            return {
                embedTemplates: [],
                embedType: 'responsive',
                pluginShareurls: [],
                shareurlType: 'default',
                beforeExport: null,
                guest_text_above: '',
                guest_text_below: '',
                redirectDisabled: false
            };
        },
        onstate({ current, changed }) {
            if (changed.afterEmbed && current.afterEmbed) {
                const p = current.afterEmbed[0];

                Promise.all([loadStylesheet(p.css), loadScript(p.js)]).then(() => {
                    require([p.module], mod => {
                        this.set({
                            beforeExport: mod.App
                        });
                    });
                });
            }
        }
    };
</script>
